/*
 * @Author: your name
 * @Date: 2020-10-30 14:10:07
 * @LastEditTime: 2020-11-12 15:38:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /crowd-funding/src/components/pages/ProgressRemind/index.js
 */
import React, { PureComponent } from 'react'
import './index.scss'
import { connect } from 'react-redux'
import Progress from './Progress/index'
import Countdown from '@jmfe/jmr-countdown'
import Exposure from '../../common/Exposure'

class ProgressRemind extends PureComponent {
	render() {
		const { homeData = {} } = this.props
		const { storyPageData = {} } = homeData
		const { projectStoryNewDto = {} } = storyPageData // 获取初始化数据

		const setTplFnc = () => {
			const settingsObj = {
				setTpl: '--',
				systemTime: 0,
				endTime: 0,
				salesTime: 0,
			}
			settingsObj.systemTime = projectStoryNewDto.systemTime // 服务器时间
				? projectStoryNewDto.systemTime
				: 0
			settingsObj.endTime = projectStoryNewDto.endTime // 距结束剩余时间
				? projectStoryNewDto.endTime
				: 0
			settingsObj.salesTime = projectStoryNewDto.salesTime // 距开始时间
				? projectStoryNewDto.salesTime
				: 0
			const DifferenceTime = settingsObj.endTime - settingsObj.systemTime // 距结束剩余时间
			const actionTime = settingsObj.salesTime - settingsObj.systemTime // 距结束开始时间

			if (projectStoryNewDto.buttonStatus == 1 && actionTime > 86400000) {
				settingsObj.setTpl = `<div id="buttomProject"><div id='progressTitle'>${parseInt(
					actionTime / 86400000
				)}</div><div id='progressSmallSize'>天</div></div>`
			}
			if (projectStoryNewDto.buttonStatus == 1 && actionTime <= 86400000) {
				settingsObj.setTpl = `<div id='progressTitle'><span>{{h}}:</span><span>{{m}}:</span><span>{{s}}</span></div>`
			}
			if (projectStoryNewDto.buttonStatus != 1 && DifferenceTime > 86400000) {
				settingsObj.setTpl = `<div id="buttomProject"><div id='progressTitle'>${parseInt(
					DifferenceTime / 86400000
				)}</div><div id='progressSmallSize'>天</div></div>`
			}
			if (projectStoryNewDto.buttonStatus != 1 && DifferenceTime <= 86400000) {
				settingsObj.setTpl = `<div id='progressTitle'><span>{{h}}:</span><span>{{m}}:</span><span>{{s}}</span></div>`
			}
			return settingsObj
		}

		const settingsObj = setTplFnc()

		const settings = {
			endTime:
				projectStoryNewDto.buttonStatus == 1 ? settingsObj.salesTime : settingsObj.endTime,
			serverNow: settingsObj.systemTime,
			tpl: settingsObj.setTpl,
			fn() {
				console.log('倒计时结束')
				// reloadHomeData()
				window.location.reload()
			},
			containerHeight: 100,
		}
		// 倒计时组件
		const countdown = <Countdown {...settings} />

		return (
			<div style={{ position: 'relative' }}>
				<Exposure floorName="progress" />
				{projectStoryNewDto.buttonStatus ? (
					<div className="ProgressRemind">
						{projectStoryNewDto.buttonStatus === 1 ? null : (
							<div>
								<div className="PropgressTitle">项目进度</div>
								<div className="PropgressTitleDesc">PROJECT SCHEDULE</div>
								<div className="progress-div">
									<Progress progress={projectStoryNewDto.progress} />
								</div>
							</div>
						)}
						<div className="projectStoryNewDtoList">
							<div>
								<div className="topProject">
									<div className="progressTitle">
										{projectStoryNewDto.buttonStatus === 1 &&
											(projectStoryNewDto.followAmount > 0
												? projectStoryNewDto.followAmount
												: 0)}
										{projectStoryNewDto.buttonStatus !== 1 &&
											(projectStoryNewDto.supports > 0
												? projectStoryNewDto.supports
												: 0)}
									</div>
									<div className="progressSmallSize">人</div>
								</div>
								<div className="buttomProject">
									<img
										className="progressIcon"
										src="https://img10.360buyimg.com/imagetools/jfs/t1/140649/29/12236/699/5f97d07cE7f76bffb/6511e77446cb07a4.png"
									/>
									<div className="progressDesc">
										{projectStoryNewDto.buttonStatus === 1
											? '关注人数'
											: '支持人数'}
									</div>
								</div>
							</div>

							<div>
								<div className="topProject">
									<div className="progressSmallSize">￥</div>
									<div className="progressTitle">
										{projectStoryNewDto.displayAmount}
									</div>
								</div>
								<div className="buttomProject">
									<img
										className="progressIcon"
										src="https://img10.360buyimg.com/imagetools/jfs/t1/153580/31/3705/630/5f97d140E7b3e45dd/f9fa8e8b7e39ccb7.png"
									/>
									<div className="progressDesc">
										{projectStoryNewDto.buttonStatus === 1
											? '众筹目标'
											: '已筹金额'}
									</div>
								</div>
							</div>

							<div>
								<div className="topProject">
									{projectStoryNewDto.buttonStatus === 3 ||
									projectStoryNewDto.buttonStatus === 4 ? (
										<div className="out-time">已结束</div>
									) : (
										// <Countdown {...settings} />
										countdown
									)}
								</div>
								<div className="buttomProject">
									<img
										alt=""
										className="progressIcon"
										src="https://img12.360buyimg.com/imagetools/jfs/t1/149212/21/12240/506/5f97d16bE2c5fbc8f/3c0cb0f3aac4e601.png"
									/>
									<div className="progressDesc">
										{projectStoryNewDto.buttonStatus === 1
											? '开始时间'
											: '剩余时间'}
									</div>
								</div>
							</div>
						</div>
					</div>
				) : null}
			</div>
		)
	}
}
const dispatchToAction = (dispatch) => {
	return {
		reloadHomeData() {
			dispatch({
				type: 'reload:homeData',
			})
		},
	}
}

export default connect(({ homeData }) => ({ homeData }), dispatchToAction)(ProgressRemind)
